<template>
	<el-breadcrumb separator="/" class="custom-breadcrumb">
		<el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>系统管理</el-breadcrumb-item>
		<el-breadcrumb-item>角色管理</el-breadcrumb-item>

	</el-breadcrumb>


	<!-- 搜索 -->
	<el-form :inline="true" :model="queryInfo" class="search-form">
		<el-form-item label="角色名">
			<el-input v-model="queryInfo.roleName" placeholder="请输入角色名" clearable style="width: 150px;" />
		</el-form-item>

		<el-form-item label="角色编码">
			<el-input v-model="queryInfo.roleCode" placeholder="角色编码" clearable />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="queryDataList">搜索</el-button>
			<el-button type="success" @click="handleCreate">新增角色</el-button>
			
		</el-form-item>
	</el-form>


	<!-- 表格 -->
	<el-table :data="dataList" row-key="id" style="width: 100%" @selection-change="handleSelectionChange" border>
		<el-table-column type="selection" width="55" />
		<el-table-column prop="id" label="ID" width="85" />
		<el-table-column prop="roleName" label="角色名" width="200" />
		<el-table-column prop="roleCode" label="角色代码" />
		<el-table-column prop="description" label="角色描述" />

		<el-table-column label="操作" width="200">
			<template #default="scope">
				<el-button type="primary" @click="update(scope.row)">编辑</el-button>
				<el-button type="danger" @click="remove(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>





	<!-- 新增和修改对话框 -->
	<el-dialog :title="title" v-model="dialogFormVisible" width="950" @close="cancle">
		<el-form :model="counselorData" label-width="100">
			<el-form-item label="角色名">
				<el-input v-model="counselorData.roleName" autocomplete="off" placeholder="请输入角色名"></el-input>
			</el-form-item>
			<el-form-item label="角色代码">
				<el-input v-model="counselorData.roleCode" autocomplete="off" placeholder="请输入角色代码"></el-input>
			</el-form-item>
			<el-form-item label="角色描述">
				<el-input v-model="counselorData.description" autocomplete="off" placeholder="请输入角色描述"></el-input>
			</el-form-item>

		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="confirm">
					确 定
				</el-button>
			</div>
		</template>
	</el-dialog>




	<!-- 分页区域 -->
	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
		:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
		layout="total, sizes, prev, pager, next, jumper" :total="total">
	</el-pagination>







</template>

<script setup>
	import {
		ElMessage,
		ElMessageBox,

	} from "element-plus";
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from "vue";


	// 搜索参数
	const queryInfo = reactive({
		id: '',
		roleName: '',
		roleCode: '',
		description: '',
		del: '',
		pageNum: 1,
		pageSize: 10,
	});


	// 总数量
	const total = ref(0)
	// 数据列表
	const dataList = ref([])
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;


	const queryDataList = () => {
		axios.get('role/page?', {
			params: queryInfo,
			// console.log('接口响应数据:', response.data);
		}).then((resp) => {
			if (resp.code == 200) {
				dataList.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('查询失败')
			}
		})
	}




	// 新增用户

	const title = ref("新增角色")
	const dialogFormVisible = ref(false)
	const counselorData = ref({
		id: '',
		roleName: '',
		roleCode: '',
		description: '',
		del: '',

	})
	// 重置
	const cancle = () => {
		dialogFormVisible.value = false
		// 重置
		counselorData.value = {
			id: '',
			roleName: '',
			roleCode: '',
			description: '',
			del: '',
		}
		console.log('你点击了取消按钮');
	}

	const handleCreate = () => {

		title.value = "新增角色"
		dialogFormVisible.value = true

		// 这里添加新增角色的逻辑，比如打开新增表单弹窗等
		console.log('执行新增角色操作');
	};



	// 编辑角色

	const update = (row) => {

		title.value = "编辑角色"
		dialogFormVisible.value = true
		counselorData.value = row
		// 这里添加编辑角色的逻辑，比如打开编辑表单弹窗等
		console.log(row);
	};



	const confirm = () => {
		if (counselorData.value.id) {
			// 传参,counselorData.value
			axios.put('role', counselorData.value)
				.then((resp) => {
					if (resp.code == 200) {
						ElMessage.success('修改成功')
					} else {
						ElMessage.error('修改失败')
					}
					queryDataList();
					dialogFormVisible.value = false;
				})
			console.log('使用了修改');

		} else {
			axios.post('role', counselorData.value)
				.then((resp) => {
					if (resp.code == 200) {
						ElMessage.success('新增成功')
					} else {
						ElMessage.error('新增失败')
					}
					queryDataList();
					dialogFormVisible.value = false;
				})
			console.log('你点击了确定按钮');
		}

	}



	const remove = (id) => {
		ElMessageBox.confirm(
				'此操作将永久删除该文件, 是否继续?',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				// ElMessage.success('删除成功')
				axios.delete(`role/${id}`).then((resp) => {
					if (resp.code == 200) {
						ElMessage.success('删除成功')
					} else {
						ElMessage.error(resp.data)
					}

				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})

		console.log(id);
	}

	// 多选
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {

		multipleSelection.value = val.map(item => {
			return item.id
		})
		console.log(multipleSelection.value);
	}


	// 批量删除方法
	const handleBatchDelete = () => {
		// 这里添加获取选中行数据并调用后端接口进行批量删除的逻辑
		ElMessageBox.confirm(
				'此操作将永久删除该文件, 是否继续?',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete(role, {
						params: {
							ids: multipleSelection.value.join(',')
						}
					})
					.then(resp => {
						if (resp.code == 200) {
							ElMessage.success('删除成功')
						} else {
							ElMessage.error('删除失败')
						}
						queryDataList();
					})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})



		console.log('执行批量删除操作');
	};




	const handleSizeChange = (size) => {
		console.log('每页显示数量发生改变');
		queryInfo.pageSize = size
		queryDataList()
	}
	const handleCurrentChange = (num) => {
		console.log('页码发生改变');
		queryInfo.pageNum = num
		queryDataList()
	}



	onMounted(() => {
		queryDataList()
	})
</script>

<style scoped>
	.custom-breadcrumb {
		padding: 12px 16px;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
		/* 添加阴影效果 */
	}
</style>